

<script setup lang="ts" >
import {http} from '@/utlis/http.ts'
import { ref ,computed,watch} from 'vue';
import {useStore} from 'vuex'
import { onLoad } from '@dcloudio/uni-app'
import Calendar from './components/uni-calendar/uni-calendar.vue'
// #ifdef MP-WEIXIN
import Text from '/src/components/FoldableText.vue'
// #endif
// #ifdef H5
import Text from '/src/components/FoldableTexth5.vue'
// #endif
import Pageskeleton from './components/Pageskeleton.vue'
// 接收页面参数
const skeletonflag = ref(true)
const query = defineProps<{
  id: string
}>()
console.log(query.id)
const s=useStore()
const msgnum = computed(()=>{return s.state.msginfo.msgnum})
console.log('num',msgnum.value);
const canvasstyle=ref({
	width:'100%',
	height:'100%'
})
const windowWidth=ref('100%')
uni.getSystemInfo({
	success: (result) => {
		windowWidth.value=result.windowWidth
canvasstyle.value.width=result.windowWidth+'px'
canvasstyle.value.height=result.windowWidth+'px'
	},
	fail: (error) => {}
})
 const detail_list=ref(false)
	uni.request({
	url: 'detail/'+query.id+'/',
	
	header: {
		Accept: 'application/json',
		'Content-Type': 'application/json',
		'X-Requested-With': 'XMLHttpRequest'
	},
	method: 'GET',
	//sslVerify: true,
	success: ({ data, statusCode, header }) => {
		detail_list.value=data.list
		skeletonflag.value = false
	},
	fail: (error) => {}
})
//评论
const pageParam=ref({
      page_num:1,
      page_size:10
    })
console.log('id:',query.id)
const comment_list=ref([
	
])
	uni.request({
		url: 'comment/user/'+query.id+'/',
		data: pageParam.value,
		header: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
			'X-Requested-With': 'XMLHttpRequest'
		},
		method: 'post',
		sslVerify: true,
		success: ({ data, statusCode, header }) => {
			comment_list.value=data.list
			console.log('comment',comment_list.value)
		},
		fail: (error) => {}
	})

const { safeAreaInsets } = uni.getSystemInfoSync()
  const onClick=(e)=>{
console.log('gitdate:',e)

uni.navigateTo({url:'/pages/chat/chat'})
  }
const buttonClick=(e)=>{

if(e.index==0){
	open()
}
else{

}
			
}
  const options=ref([{
	icon:'chat',
	text:'客服',
	info:0
  }])
  watch(msgnum.value,(newnum,oldnum)=>{options.value.info=newnum})
  const buttonGroup=ref([{
	      text: '查看档期',
	      backgroundColor: '#ff0000',
	      color: '#fff'
	    },
	    // {
	    //   text: '立即预定',
	    //   backgroundColor: '#ffa200',
	    //   color: '#fff'
	    // }
	    ])
//日历
const calendar=ref(null)
const open=()=>{
calendar.value.open()
}
//订单详情
const orderdetail=ref({
      matron_id:query.id,
      date_start:0,
	  date_end:0,
	  pay:0
    })
const orderDay = ref(0)
const OpenPopup=(e)=>{
	orderDay.value = e.range.data.length
	if(e.range.data.length>5){
		orderdetail.value.date_start=e.range.before
	orderdetail.value.date_end=e.range.after
	orderdetail.value.pay=Math.floor(detail_list.value.head_list.price/30)*e.range.data.length
aletrDialog.value.open()

	}
	else{
		uni.showToast({
          title: '天数必须大于5天',
          icon: 'error',
          mask: false
        })
	}
	
}

const confirm = ()=>{
	if(orderDay.value<=5)return;
	uni.request({
		url: 'reserve/',
		data: orderdetail.value,
		header: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
			'X-Requested-With': 'XMLHttpRequest'
		},
		method: 'POST',
		sslVerify: true,
		success: ({ data, statusCode, header }) => {
			console.log('order:',data)
			if(data.code == 0 || data.code==200){
				uni.showToast({
          title: '预定成功',
          icon: 'success',
          mask: true
        })
		uni.navigateTo({ url: '/pages/order/order?order='+data.serial })
			
	}
			else{
				
		if(data.code==400 ){
			uni.showToast({
				title:"请先登录",
				inco:"none"
			})
			uni.navigateTo({url:'/pages/login/login'})
		}
		else{
			uni.showToast({
          title: '预定失败',
          icon: 'error',
          mask: false
        })
		}

			}
		},
		fail: (error) => {
			uni.showToast({
          title: '预定失败',
          icon: 'error',
          mask: false
        })
		}
	})
	aletrDialog.value.close()
}
const getDate=(date, AddDayCount = 0)=> {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
const selectf=ref([

	{
						date: '2023-12-10',
						info: '已预定',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					}
	
])

const start_date=getDate(new Date()).fullDate
const Ontap=(url,urls)=>{
	let tem_urls=[]
	for(let i=0;i<urls.length;i++){
		tem_urls.push(urls[i].url)
	}
	uni.previewImage({
    current: url,
    urls: tem_urls,
  })
}

function generateDateRange(start_date, end_date) {
  const startDate = new Date(start_date);
  const endDate = new Date(end_date);
  const dateRange = [];
  const infodate=[]
const res_date=[]
  // 循环遍历日期范围
  while (startDate <= endDate) {
    dateRange.push(formatDate(startDate));
	infodate.push({
		date: formatDate(startDate),
		info: '已预定',
	})
    startDate.setDate(startDate.getDate()+1);

  }
  res_date.push(dateRange)
  res_date.push(infodate)
  return res_date;
}

function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
const slot_list=ref([])
const infodate=ref([])
const distatess=ref([])
const id_dis = ref(false)
uni.request({
		url: 'slot/'+query.id+'/',
		// data: {},
		header: {
			Accept: 'application/json',
			'Content-Type': 'application/json',
			'X-Requested-With': 'XMLHttpRequest'
		},
		method: 'GET',
		sslVerify: true,
		success: ({ data, statusCode, header }) => {
			console.log('list:',data.list)
			slot_list.value=data.list
			for(let i=0;i<slot_list.value.length;i++){
	const resultt = generateDateRange(slot_list.value[i].start_date, slot_list.value[i].end_date);
	
	distatess.value=[...distatess.value,...resultt[0]]
	infodate.value=[...infodate.value,...resultt[1]]
}
// distatess.value = distatess.value
//  console.log(infodate.value);
// console.log(distatess.value);
id_dis.value=true

		},
		fail: (error) => {}
	})
// 测试

const aletrDialog=ref()



</script>
<template>
	<Pageskeleton v-if="skeletonflag"></Pageskeleton>
 
	<scroll-view class="box1" scroll-y v-else>
	<!-- 形象照片 -->
	  <view class="Image"  style="position: relative;">
		<img class="u2-img" src="/static/show.png" :style="canvasstyle" alt="">  
		<img class="u1-img" :src="detail_list.head_list.default_img" :style="canvasstyle"  alt="">
	  <view class="Imagetext">
		<view class="price">服务费:￥{{detail_list.head_list.price}}</view>
	  <view class="deposit">定金:<span style="color: rgb(221, 41, 41);">￥{{detail_list.head_list.earnest}}</span></view>
	 
	  </view>
	  
	  </view>
	  <!-- 我的记录 -->
	  <view class="setitle">
		<view class="sethead">
			<image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>我的记录</view>
		</view>
			<!-- ------------ -->
			<view class="title_t">
				<view class="title_left">
					<uni-icons type="auth-filled" size="25"></uni-icons>
					<view class="text1">服务过
						<text class="text2">{{detail_list.head_list.serve_num}}位</text>
						宝妈
					</view>
				</view>
			<view class="title_right">
				<uni-icons type="contact" size="25"></uni-icons>
				<view class="text1">服务时长
					<text class="text2">{{detail_list.head_list.serve_date}}天</text>
				</view>
			</view>
			  </view>
		</view>
	  
	  <!-- 相关证书 -->
	
	  <view class="setitle">
		<view class="sethead"><image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>相关证书</view></view>
			<view class="certificate">
				<view v-if="detail_list.certificate_list[0].length">
					<view class="cer_title" title="">健康证
					</view>
					<view class="b_cer_img">
						<view class="b_cer_title"  v-for="item in detail_list.certificate_list[0]"  :key="item.id"  @click="Ontap(item.url,detail_list.certificate_list[0])" >
						<img class="cer_img" :src="item.url">	
						 </view>
					</view>
					 
				</view>
				<view v-if="detail_list.certificate_list[1].length">
					<view class="cer_title" title="">体检表
					</view>
					<view class="b_cer_img">
						<view class="b_cer_title"  v-for="item in detail_list.certificate_list[1]"  :key="item.id"  @click="Ontap(item.url,detail_list.certificate_list[1])" >
							<img class="cer_img" :src="item.url">
						 </view>
					</view>
					
				</view>
				<view v-if="detail_list.certificate_list[2].length">
					<view class="cer_title" title="">育婴证
					</view>
					<view class="b_cer_img">
						<view class="b_cer_title"  v-for="item in detail_list.certificate_list[2]"  :key="item.id"  @click="Ontap(item.url,detail_list.certificate_list[2])" >
							<img class="cer_img" :src="item.url">
						 </view></view>
					</view>
					
				
			</view>
		</view>
	  <!-- 基本信息 -->
	  
	  <view class="setitle">
		<view class="sethead"><image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>基本信息</view></view>
			<!-- ------------ -->
			
					<view class="basic_form">
						<view class="form_head">
							<view class="form_name"><view>姓名</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.name}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>年龄</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.age}}</view></view>
						</view>
					
						<view class="form_head">
							<view class="form_name"><view>民族</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.nation}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>婚姻状况</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.marriage}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>属相</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.zodiac}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>星座</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.startsign}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>身高</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.height}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>体重</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.weight}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>所属门店</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.department}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>户籍地址</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.domicile}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>常住地址</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.permanent}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>培训评价</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.training}}</view></view>
						</view>
						<view class="form_head">
							<view class="form_name"><view>综合评价</view></view>
							<view class="form_value"><view>{{detail_list.basic_list.synthesis}}</view></view>
						</view>
					  </view>	
		</view>
	  <!-- 工作经历 -->
	 
	  <view class="setitle">
		<view class="sethead"><image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>工作经历</view></view>
			<!-- ------------ -->
			<uni-table  >
			  
				<uni-tr >
					<uni-th width="50" align="center">工作时间</uni-th>
					<uni-th width="50" align="center">工作内容</uni-th>
					<uni-th width="50" align="center">薪资</uni-th>
				</uni-tr>
			  
				<uni-tr v-for="item in detail_list.work_list" >
					<uni-td width="50" align="center">{{item.date}}</uni-td>
					<uni-td width="50" align="center">{{item.work}}</uni-td>
					<uni-td width="50" align="center">{{item.pay}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	  <!-- 家庭成员 -->
	
	  <view class="setitle">
		<view class="sethead"><image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>家庭成员</view></view>
			<!-- ------------ -->
			<uni-table  class="table_list"  >
			 
				<uni-tr>
					<uni-th width="10" align="center">姓名</uni-th>
					<uni-th width="10" align="center">关系</uni-th>
					<uni-th width="50" align="center">工作单位</uni-th>
					<uni-th width="10" align="center">职务</uni-th>
	
				</uni-tr>
			  
				<uni-tr v-for="item in detail_list.family_list" >
					<uni-td width="10" align="center">{{item.name}}</uni-td>
					<uni-td width="10" align="center">{{item.relations}}</uni-td>
					<uni-td width="50" align="center">{{item.unit}}</uni-td>
					<uni-td width="10" align="center">{{item.job}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	  <!-- 作品展示 -->
	
	  <view class="setitle">
		<view class="sethead"><image
			style="width: 50rpx;height: 50rpx;"
				src="/static/title.png"
				mode="scaleToFill"
			/><view>作品展示</view></view>
			<!-- ------------ -->
			<view class="show_bpx">
				<view class="box_s_img" v-for="index in detail_list.display_list" :key="index.id" @click="Ontap(index.url,detail_list.display_list)">
					<img class="s_img"  :src="index.url" >
				</view>
			</view>
			
	
		</view>
	  <!-- 最新评论 -->
	
	<view class="new_comment">
			<view class="box" v-for="(item,indexs) in comment_list" :key="item.id">
				<view class="setitle" style="margin: 0px;padding-bottom: 2px;box-shadow: 0px 0px 0px ;" v-if="indexs==0">
					<view class="sethead"><image
						style="width: 50rpx;height: 50rpx;"
							src="/static/title.png"
							mode="scaleToFill"
						/><view>最新评论</view></view>
						<!-- ------------ -->
				
					</view>
				<view class="user_info">
					<img
					class="info_img"
					:src="item.user_img"
						mode="scaleToFill"
					/>
					<view class="info_text">
						<view class="info_name">{{item.user_name}}</view>
						<view class="info_date">{{item.create_date}}</view>
						
					</view>
				</view>
				<uni-rate
						v-model="item.star"
						isFill="false"
						readonly="true"
						margin="17px"
					  />
				<view class="comment_content">{{item.comment}}</view>
				<view class="comment_img" v-if="item.is_img">
						<view class="box_img" v-for="index in item.url_list" :key="index.id">
							<img
							class="co_img"
							:src="index.url" @click="Ontap(index.url,item.url_list)"
								mode="scaleToFill"
							/>
						</view>
					
					  </view>
			</view>	
	</view>
	  
	</scroll-view>
	<Calendar 
	v-if="id_dis"
	  ref="calendar"
	  :insert="false"
	  :range="true"
	  @confirm="OpenPopup"
	  :selected="infodate"
	  :disabledDay="distatess"
	   />
	 <uni-popup ref="aletrDialog" background-color="#fff" @change="change">
		<view class="conent">
			<view class="conent_title">《预定月嫂须知》</view>
			<view class="conent_h1">1.月嫂职责</view>
			<view class="conent_text">月嫂负责月子期间照顾产妇及婴儿，具体职责范围如下：</view>
			<view class="conent_h2">产妇护理：</view>
			<view class="conent_text">①产妇的日常护理：产妇心理护理、产妇乳房护理、产妇异常产褥的护理、产后修复操指导</view>
				<view class="conent_text">②产妇膳食营养与制作：月子期产妇膳食制作、月子餐食谱指导</view>
				<view class="conent_text">③产妇日常生活起居护理：协助擦身、清洗阴道、洗澡、洗头、衣物清洗等工作</view>
		<view class="conent_h1">5、关于选择月嫂服务时长的问题</view>
			<view class="conent_text">为更好的服务客户，月嫂一个月服务时间一般为连续服务26天，最后4天集中休息，休息时间段如有特殊情况可根据实际情况协商调整。具体的预定服务时长客户可根据自身需求进行选择。例如：医学建议的42天或者更长。</view>
			<view class="conent_h1">6、关于月嫂服务费的计算方式客户根据自身需求选择不同级别月嫂及服务时间的，月嫂服务费计算方式如下：</view>
			<view class="conent_text">（月嫂服务费总额-800元）/26*实际服务天数+800（实际服务天数/26），其中每26天周期收取800 元服务费，实际服务天数不足
				26 天按一个周期计收平台服务费。如客户选择资深月嫂，服务费总额 12800元，选择服务周期40天，则月嫂服务费：（12800-80
				0）/26*40+800（实际服务天数/26）=1846
				2+800*2=20062元。</view>
			<view class="conent_h1">7、关于月嫂上岗时间的问题</view>
			<view class="conent_text">因客户产程较长，期间可能存在不确定因素，若生产时间提前或延后，客户及月嫂一致同意平台更换其他月嫂以便服务。月嫂到岗时间具体以客户通知时间为准，通常为方便月嫂及时了解宝宝及产情况，建议产妇在医院分娩月嫂即到岗，及时对产妇、婴儿进行护理。</view>
			<view class="conent_h1">8、对月嫂服务不满意及服务费用怎样核
				算</view>
			<view class="conent_text">服务过程中，客户无正当理由不得无故开除月嫂，应尊重、理解月嫂辛苦付出，若月嫂服务确实有缺陷但不构成重大过失的，不能解除服务关系，平台自愿在规定工作时间免费为客户安排换人，原服务月嫂需等新月嫂到岗，做好交接工作，原定月嫂才能离岗。如遇月嫂疾病或突发情况不能继续工作，平台会安排接替人员交接完成后后续服务。平台通常情况会安排同级别月嫂来服务，若特殊情况调配不了同级别月嫂，会根据实际服务月嫂费用进行结算。</view>
			
		</view>
			
		<view class="conent_button">
			<view class="close_button" @click="aletrDialog.close()">取消</view>
			<view class="confirm_button" @click="confirm">同意</view>
		</view>
	</uni-popup>
	<uni-goods-nav class="goods-carts" :fill="true" :buttonGroup="buttonGroup" :options="options" @buttonClick="buttonClick"  @click="onClick" />
  </template>
<style lang="scss">

.page{
	padding: 0;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
}
.conent{
	margin:0px 5px 5px 5px;
	/* padding: 5px; */
	width: 220px;
	height: 250px;
	overflow:auto;
	
	.conent_title{
		/* width: 100%; */
		position: sticky;
		top:0;
		text-align: center;
		font-size: 16px;
		padding: 5px;
		background-color: #fff;

	}
	.conent_h1{
		color: #020202;
		font-weight: 500;
		font-size: 15px;
	}
	.conent_h2{
		color: #020202;
		font-size: 400;
		font-size: 14px;
	}
	.conent_text{
		margin-left: 4px;
		color: rgba(0, 0, 0, 0.6);
		font-size: 14px;
	}
	
}
.conent_button{
	display: flex;
	height: 35px;
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
	line-height: 35px;
	color: 15px;
	text-align: center;
	justify-content:space-around;
	.confirm_button{
		color: aquamarine;
	}

}
.basic_form{
		background-color: #fff;
		margin: 12px;
		margin-bottom: 7px;
		border-left: 1px solid rgba(0, 0, 0, 0.3);
			border-right: 1px solid rgba(0, 0, 0, 0.3);
			border-top: 1px solid rgba(0, 0, 0, 0.3);
		.form_head{
			display: flex;

			color: rgba(0, 0, 0, 0.5);
			font-size: 13px;
			font-weight: 450;
			text-align: center;
			text-wrap: wrap;
			line-height: 17px;
			letter-spacing: 0.1em;
			
			border-bottom: 1px solid rgba(0, 0, 0, 0.3);
			/* border-left: 1px solid rgba(0, 0, 0, 0.3);
			border-right: 1px solid rgba(0, 0, 0, 0.3); */
			.form_name{
				display: flex;
				width: 30%;
				align-items: center;
				justify-self: center;
				letter-spacing: 0.13em;
			color: rgba(0, 0, 0, 0.65);
			font-weight: 500;
				border-right: 1px solid rgba(0, 0, 0, 0.3);
				flex-grow: 3;
				view{
				width: 100%;
				margin: 6px;	
				}
				
			}
			.form_value{
				display: flex;
				width: 70%;
				align-items: center;
				justify-content: flex-start;
				flex-grow: 7;
				view{
				width: 100%;
				text-align: start;
				margin: 6px;
				margin-left: 8px;	
				}
			}
			
		}
	}
.setitle{
	
		margin: 5px;
		margin-top: 6px;
		margin-bottom: 6px;
		/* box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2); */
		border-radius: 5px;
		font-size: 15px;
		background-color: #fff;
		color: rgba(0, 0, 0, 0.7);
		padding-bottom: 10px;
		.sethead{
			display: flex;
			border-radius: 0;
			font-weight: 570;
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 0.5px solid rgba(0, 0, 0, 0.3) ;

		align-items: center;
		image{
			margin-left: 2px;
			margin-right: 2px;
		}
		}
		
	}
.goods-carts {
	position: absolute;
	width: 102%;
	min-height: 0.5625rem;
	/* #ifdef H5 */
	min-height: 55px;
	/* #endif */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0rpx;
		right: 0;
	
		bottom: 0;
	}
.box1 {
	display: flex;
	height:auto;
	width: 100%;
	background-color: #edeeef;
	/* 形象照片 */
	.Image{
		.u1-img {
			vertical-align: middle;
		width: 100%;
		
		margin: 0;
		.price{
	background-color: antiquewhite;
	width: 50%;
	

}
		.deposit{
	margin-left: 100rpx;
	right: 10rpx;
}
	}
	.u2-img{
		position: absolute;
	}
	.Imagetext{
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		margin: 0;
		margin-bottom: 6px;
		padding: 10px;
		font-size: 16px;
		letter-spacing: 0.01em;
		.price{
			
		}
	}
	
	}
	/* 我的记录 */
	.records{
		

	}
			
	.title_t{
			
			display: flex;
		justify-content: space-around;
		font-size: 27rpx;
		font-weight: 400;
		margin: 6px;
		margin-top: 20px;
		margin-bottom: 10px;
		}
		.text2{
			font-size: 37rpx;
			color: red;
		}
		.title_left{
			display: flex;
			justify-content: flex-end;
			
			line-height: 33rpx;
		}
		.title_right{
			display: flex;
			justify-content: flex-end;
			
			line-height: 33rpx;
		}
	/* 相关证书 */
	.certificate{
	
.b_cer_img{
	display: flex;
	flex-wrap: wrap;
}
		.b_cer_title{
			width: 300rpx;
			height: 300rpx;
			max-width: 300rpx;
		 max-height: 300rpx;
		 overflow: hidden;
		 margin: 30rpx;
		 margin-top: 10rpx;
		 border-radius: 5px;
		 box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
		}
		.cer_img{
         width: 100%;
		height: 100%;
		object-fit: cover;
		}
		.cer_title{
			font-size: 28rpx;
			margin: 9px;
			color: blue;
		}
	}
	/* 基本信息 */
	.basic_info{
		font-size: 35rpx;
	
		
		font-size: 15px;
		font-weight: 400;
		.pro_text{
			
			display: flex;
			color: rgba(0, 0, 0, 0.3);
			align-items: center;
			.name_text{

			}
			.info_text{
				flex-grow: 1;
				text-align: letf;
			margin: 20px;
			color: rgba(0, 0, 0, 0.6);

		}
		}
		
		.basic_text{
			color: black;
		}
		
	}
	/* 作品展示 */
	.show_img{
	
	}
	.show_bpx{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		&::after{
			content: '';
			width: 320rpx;
			flex-grow: 1;
		}
	}
	
	.box_s_img{

		width: 320rpx;
		height: 320rpx;
		margin: 15rpx;

		flex-grow: 1;
			border-radius: 5px;
			overflow: hidden;
	}
	.s_img{
			
		width: 100%;
		height: 100%;
		object-fit: cover;
		   
		   }
	.table_list{
		font-size: 20rpx;
	}
	/* 最新评论 */
	.new_comment{
		margin-top: 0px;
	margin-bottom: 50px;
	}
}
.box{
	border-radius: 5px;
	background-color: #fff;
	margin: 3px;
	margin-top: 0px;
	margin-bottom: 8px;
	.user_info{
		width: 100%;
		display: flex;
		margin-bottom: 3px;
		align-items: center;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
		.info_img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin: 5px;

		}
		.info_text{
			font-size: 11px;
			font-weight: 700;
			color: rgba(0, 0, 0, 0.9);

			.info_name{
				margin: 5px;
			}
			.info_date{
				margin: 5px;
				font-weight: 600;
				font-size: 9px;
				color: rgba(0, 0, 0, 0.6);
			}
		}
		
	}
	.comment_content{
		
	
	margin: 5px;
	font-size: 13px;
	/* font-weight: 600; */
	line-height: 15px;
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 6px;
	letter-spacing: 0.1em;
	}
	.comment_img{
		width: 100%;
		
		margin: 5px;
		margin-top: 0px;
		padding-bottom: 6px;
		display: flex;
		flex-wrap: wrap;
		.box_img{
			width: 220rpx;
			height: 220rpx;
			margin: 5px;
			overflow: hidden;
			border-radius: 10px;
			.co_img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
	}
}

  .user-info {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0rpx 0rpx 0rpx 30rpx;
		background-image: linear-gradient(135deg, #dfe5e7 10%, #dfe1e2); 
		position: relative;

		.u-img {
			width: 75rpx;
			height: 75rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
			background-color: #fff;
		}

		.u-text {
			flex: 1;
      width: 100%;
			color: #020202;
			padding: 16rpx 25rpx;
		}

		.username {
			font-weight: bolder;
			font-family: 黑体;
		}

		.small-text {
			font-size: 24rpx;
			padding-top: 10rpx;
		}

	
	}
  .u-comment{
    font-size: 28rpx;
	line-height: 28rpx;
    width: 100%;
    padding: 0rpx 10rpx 20rpx 10rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    letter-spacing: 0.07em;
    
  }
  .c-img{
	display: flex;
	width: 100%;
    margin-left: 0rpx;
    margin-right: 10rpx;
    flex: 1;
    padding: 0rpx 0rpx 0rpx 10rpx;
	justify-content: flex-start;
    .cc-img{
      width: 220rpx;
			height: 220rpx;
			
			margin: 1px;
    }
  }
</style>